import { useSetRecoilState } from 'recoil';

import { Inbox as InboxIcon } from '@mui/icons-material';
import {
  Box,
  ListItem,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  Theme,
  useTheme
} from '@mui/material';

import { appListState } from 'state/appList';

const taskListContainerStyles = (theme: Theme) => ({
  background: theme.palette.background.paper,
  borderRadius: '4px',
  border: `1px solid ${theme.palette.divider}`,
  width: '100%',
  display: 'flex',
  flexDirection: 'column',
  boxShadow:
    theme.palette.mode === 'dark'
      ? '0px 4px 20px 0px rgba(0, 0, 0, 0.20)'
      : '0px 4px 20px 0px rgba(0, 0, 0, 0.05)'
});

export default function LeftNav() {
  const theme = useTheme();
  const setAppList = useSetRecoilState(appListState);

  // const sessions = new Array(3)
  //   .fill('')
  //   .map((_: string, index: number) => `会话${index + 1}`);

  function openAppListModal() {
    setAppList((old) => ({ ...old, open: true }));
  }

  return (
    <Box
      component="aside"
      sx={{
        color: theme.palette.text.primary,
        padding: theme.spacing(2),
        width: '280px',
        flexShrink: '0',
        display: {
          xs: 'none',
          md: 'flex'
        }
      }}
    >
      <Box
        sx={{
          ...taskListContainerStyles(theme)
        }}
      >
        {/* <Header status={content?.status} /> */}

        {/* 会话列表 */}
        <Box
          sx={{
            overflowY: 'auto',
            flex: 1
          }}
        >
          {/* <List>
            {sessions.map((session, index) => (
              <ListItem disablePadding key={index}>
                <ListItemButton>
                  <ListItemText primary={session} />
                </ListItemButton>
              </ListItem>
            ))}
          </List> */}
        </Box>

        {/* 底部菜单 */}
        <Box sx={{ padding: '20px 0' }}>
          <ListItem disablePadding onClick={openAppListModal}>
            <ListItemButton>
              <ListItemIcon>
                <InboxIcon />
              </ListItemIcon>
              <ListItemText primary="应用" />
            </ListItemButton>
          </ListItem>
        </Box>
      </Box>
    </Box>
  );
}
